var startingGame = false;
var player1TD = null;
var player2TD = null;

$(document).ready(function () {

//    $("#usersTable").find("table").click(function () {
//
//        $("[name='editThis']").val($(".tableUsername", this).html());
//    });

    $("#usersTable").find("table").click(function () {

        if (startingGame) {

            if ($(".onlineState", this).html().indexOf("Online (Mobile)") != -1) {

                if (player1TD === null) {

                    player1TD = $(this);
                    player1TD.css('background-color', 'gainsboro');

                } else if ($(".tableUsername", player1TD).html() != $(".tableUsername", $(this)).html()) {

                    player2TD = $(this);
                    player2TD.css('background-color', 'gainsboro');

                    var player1 = $(".tableUsername", player1TD).html();
                    var player2 = $(".tableUsername", player2TD).html();

                    console.log("Player 1 is: " + player1 + "  |  Player 2 is: " + player2);

                    if (startGame(player1, player2)) {

                        $("#startGameButton").css("display", "none");
                        $("#stopGameButton").css("display", "block");

                    }

                    resetPlayers();
                    startingGame = false;

                } else {

                    alert("please select a different second player");

                }
            } else {

                alert("please select a valid player");

            }
        }
    });

    $("#stopGameButton").click(function () {

        if (stopGame()) {

            $("#startGameButton").css("display", "block");
            $("#stopGameButton").css("display", "none");
        }
    });

    $("#startGameButton").click(function () {

        startingGame = !startingGame;

        if (startingGame) {

            $("#message").html("<div id='serverOkMessage'><p>'Please click two players which are logged onto a mobile device'</p></div>");

        } else {

            $("#message").html("");
            resetPlayers();
        }
    });
});

function startGame(player1, player2) {

    $.ajax({
        type: "POST",
        url: "/requestGameStart",
        data: {player1: player1, player2: player2},
        cache: false,
        timeout: 5000,
        success: function (data) {

            if (typeof data.error == 'undefined') {

                $("#message").html("<div id='serverOkMessage'><p>'Game successfully started'</p></div>");
                clearMessage(3000);
                return true;

            } else {

                $("#message").html("<div id='serverErrorMessage'><p>" + 'Error: ' + data.error + "</p></div>");
                return false;

            }

        }, error: function (jqXHR, textStatus, errorThrown) {

            $("#message").html("<div id='serverErrorMessage'><p>" + 'Error ' + textStatus + " " + errorThrown + "</p></div>");
            return false;
        }
    });
}

function stopGame() {

    $.ajax({
        type: "POST",
        url: "/requestGameEnd",
        cache: false,
        timeout: 5000,
        success: function (data) {

            if (typeof data.error == 'undefined') {

                $("#message").html("<div id='serverOkMessage'><p>'Game successfully stopped'</p></div>");
                clearMessage(3000);
                return true;

            } else {

                $("#message").html("<div id='serverErrorMessage'><p>" + 'Error: ' + data.error + "</p></div>");
                return false;
            }

        }, error: function (jqXHR, textStatus, errorThrown) {

            $("#message").html("<div id='serverErrorMessage'><p>" + 'Error ' + textStatus + " " + errorThrown + "</p></div>");
            return false;
        }
    });
}

function resetPlayers() {

    if (player1TD !== null) {

        player1TD.css('background-color', 'white');
        player1TD = null;
    }

    if (player2TD !== null) {

        player2TD.css('background-color', 'white');
        player2TD = null;

    }
}

function clearMessage(delay) {

    setTimeout(function () {

        $("#message").html("");

    }, delay);
}